<%@ page language="java" contentType="text/html;charset=utf-8" %>
<%--<%@ include file="/webpage/include/taglib.jsp"%>--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>中国检验认证集团商品溯源平台</title>

    <link href="${pageContext.request.contextPath}/static/css/css.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/lightGallery.css" />

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        body {
            display: block;
            min-width: 100%;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .content {
            color: #FFF;
            font-size: 1.3rem;
            background-image: url('${pageContext.request.contextPath}/static/images/cleanback.png');
            background-size:cover;
            background-repeat: repeat-x;
            min-height: 38rem;

        }

        .content .header {
            color: #FFF;
            text-align: center;
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
        }
        .content .header h1,h4 {
            font-family: "PingFang SC";
        }
        .content .header h1 {
            font-size: 1.5rem;
        }
        .content .header h4 {
            font-size: 0.6rem;
        }

        hr {
            color: lightgrey;
        }

        .content .base-info {
            font-family: "PingFang SC";
            padding-left: 2rem;
            padding-top: 0.3rem;
        }

        .content .base-info p {
            line-height: 2.2rem;
        }

        .content .result {
            width: 85%;
            margin-top: 0.6rem;
            margin-left: 2rem;
            padding-left: 0.4rem;
            padding-bottom: 0.4rem;
            padding-top: 0.5rem;
            border:2px solid;
            border-radius:25px;
            background-color:rgba(255,255,255,0.2);
        }

        .content .show{
            padding-left: 1.8rem;
            padding-top: 2.5rem;
        }

        .content .show > div {
            text-align: center;
            width: 50%;
        }

        .content .show .showpic{
            width: 10rem;
            height: 10rem;
            margin-top: 1.3rem;
            border-radius:25px;
        }

        .content .show .auth{
            margin-left: 8.8rem;
            position:absolute;
            z-index: 10;
        }

        p.indent-p-3em {
            text-indent: 2.8em;
        }
        p.indent-p-1em {
            text-indent: 0.8em;
        }
        p.redpicc{
            color: red;
        }

        /*p.indent-p-5em {*/
            /*text-indent: 4.8em;*/
        /*}*/


        .footer {
            background-image: url('${pageContext.request.contextPath}/static/images/whiteback.png');
            background-size:cover;
            background-repeat: repeat-x;
            min-height: 19rem;
        }
        .above-footer {
            font-family: "PingFang SC";
            font-size: 0.9rem;
            padding-left: 2rem;
            padding-bottom: 1.2rem;
        }
        .above-footer strong,.footer strong{
            font-weight: 400;
            color: #1B7FD5;
        }
        .above-footer span {
            color: #FFF;
            background-color: #A5D6FB;
            padding-left: 0.8rem;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            border-radius:25px;
            font-size: 1.1rem;
        }

        .under-footer {
            font-family: "PingFang SC";
            font-size: 1.1rem;
            padding-bottom: 2rem;
        }
        .under-footer > div {
            width: 100%;
            padding-top: 0.4rem;
            padding-bottom: 0.2rem;
        }
        .under-footer > div > div {
            text-align: center;
            width: 50%;
        }
        .under-footer img {
            width: 70%;
        }

        .company {
            text-align: center;
            background-color: #A5D6FB;
        }
        .company h1 {
            line-height: 2rem;
            font-family: "PingFang SC";
            font-size: 1.2rem;
            font-weight: 700;
            color: #FFF;
        }

    </style>
</head>

<body>

    <%--主体信息部分--%>
    <div class="content">
        <div class="header">
            <%--<h1>中国检验认证集团天津有限公司</h1>--%>
            <h1>高端消费品鉴定溯源系统</h1>
            <%--<h4>CHINA CERTIFICATION&INSPECTION GROUP TIANJIN CO.,LTD</h4>--%>
            <h4>HIGH-GRADE CONSUMER PRODUCTS CERTIFICATION&TRACEABILITY PLATFORM</h4>
        </div>
        <hr/>
        <div class="base-info">
            <p>品牌： ${brand} &nbsp;&nbsp;&nbsp;${zhongbrand}</p>
            <p>品牌防伪码： ${markItem.securitycode}</p>
            <p>品类： ${type}</p>
        </div>
        <div class="result">
            <p>结论：该委托商品符合品牌/制造商</p>
            <p class="indent-p-3em">公示的技术信息和工艺特征。</p>
            <p class="indent-p-3em">已由PICC中国人保财险承保职业责任险。</p>
        </div>
        <div class="show">
            <div class="left">
                <div><img class="auth" src="${pageContext.request.contextPath}/static/images/auth.png"/></div>
                <div><img class="showpic" src="${pageContext.request.contextPath}/jeeplus/${markItem.zhengimg.substring(0,markItem.zhengimg.lastIndexOf("."))}-m${markItem.zhengimg.substring(markItem.zhengimg.lastIndexOf("."))}"/></div>
            </div>
            <div class="right">
                <div><img class="auth" src="${pageContext.request.contextPath}/static/images/auth.png"/></div>
                <div><img class="showpic" src="${pageContext.request.contextPath}/jeeplus/${markItem.fanimg.substring(0,markItem.fanimg.lastIndexOf("."))}-m${markItem.fanimg.substring(markItem.fanimg.lastIndexOf("."))}"/></div>
            </div>
        </div>
    </div>

    <%--底部提示信息部分--%>
    <div class="footer">
        <div class="above-footer">
            <p><strong>备注：</strong>请检查该吊牌、一次性标签和封条的完整性。上</p>
            <p>述任何部分如发生破坏、缺失、涂改，则此信息无效。</p>
            <p>&nbsp;</p>
            <span>${markItem.mcode}<span/>
        </div>
        <hr/>
        <div class="under-footer">
            <div>
                <div class="left">
                    <img src="${pageContext.request.contextPath}/static/images/qrright.png" alt="">
                </div>
                <div class="right">
                    <img src="${pageContext.request.contextPath}/static/images/qrleft.png" alt="">
                </div>
            </div>
            <div>
                <div class="left">
                    <span>长按加公众号</span>
                </div>
                <div class="right">
                    <span>长按验证溯源码</span>
                </div>
            </div>

        </div>
    </div>
    <div class="company">
        <p>&nbsp;</p>
        <h1>中国检验认证集团天津有限公司</h1>
        <p>&nbsp;</p>
    </div>
</body>
</html>
